<script>

import { currentUser, logoutUser } from '@/utils/login-user';

export default {
    data() {
        return {
            user: null,
        };
    },
    created() {
        this.user = currentUser();
    },
    methods: {
        routeRegist() {
            this.$router.push("/register");
            return;
        },
        routeLogin() {
            this.$router.push("/login");
            return;
        },
        routeAdmin(){
            this.$router.push('/user');
            return;
        },
        routeMine(){
            this.$router.push('/mine');
            return;
        },
        routeCart(){
            this.$router.push('/cart');
            return;
        },
        routeShop(){
            this.$router.push('/shop');
            return;
        },
        logout() {
            this.user = logoutUser();
            this.$emit("logout")
        }
    }
}

</script>
<template>
    <header>
        <div class="header-container">
            <div class="header-element">
                <span @click.prevent="routeShop">欢迎来到Colorful</span>
                <span v-if="user == null">
                    <span><a href="#" class="header-link" @click.prevent="routeLogin">请登录</a></span>
                    <span><a href="#" class="header-link" @click.prevent="routeRegist">免费注册</a></span>
                </span>
                <span v-else>
                    <span><a href="#" class="header-link" @click.prevent="routeUser">{{ user.username }}</a></span>
                    <span v-if="user.role == 1"><a href="#" class="header-link" @click.prevent="routeAdmin">管理后台</a></span>
                    <span><a href="#" class="header-link" @click.prevent="logout">退出</a></span>
                </span>
            </div>
            <div class="header-element">
                <span @click="routeMine">我的Colorful</span>
                <span @click="routeCart">购物车</span>
                <span>手机Colorful</span>
                <span>帮助中心</span>
                <span>品牌合作</span>
            </div>
        </div>
    </header>
</template>
<style scoped>

header{
    width: 100%;
}

.header-link {
    color: white;
}

.header-link:hover {
    color: red;
}


header {
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
}

.header-container {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-element span {
    font-size: 12px;
    font-family: arial;
    line-height: 30px;
    margin-left: 18px;
    cursor: pointer;
}

.header-element a {
    text-decoration: none;
}

.header-container {
    width: 60%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.body-container {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.header-element span {
    font-size: 12px;
    font-family: arial;
    line-height: 30px;
    margin-left: 18px;
}

.header-element a {
    text-decoration: none;
}
</style>